<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>滚滚筹-抽奖</title>
    <link rel="stylesheet" href="css/fb-common.min.css">
    <link rel="stylesheet" href="css/sliderBox.float.css">
    <link rel="stylesheet" href="css/jBox.css">
    <link rel="stylesheet" href="css/main.min.css?a=1.0">
    <link rel="stylesheet" href="css/product.min.css?a=1.0">
</head>
<body class="theme-f5">
<div class="fb-wrap gray-f5">
    <!--头部-->
    <div class="in-header-bar">
        <div class="in-fast-bar">
            <div class="fb-wrap-1200 fs-14 clear">
                <label class="in-fast-tel">
                    <i class="fb-sprite icon-head-tel"></i>
                    <span class="tc-999">服务热线：123456 （9:00~22:00）</span>
                </label>
                <div class="in-fast-nav">
                    <label class="in-user-nav">
                        <a class="border-none-right mr-0" href="user-login.html">您好，请登录</a>
                        <a class="" href="user-register.html">免费注册</a>
                        <a class="" href="user-help.html">帮助中心</a>
                    </label>
                    <label class="in-user-fast">
                        <a class="app-ewm-bar fn-hover-bar" href="javascript:;">
                            <span class="fb-btn line main-color"><i class="fb-sprite icon-phone"></i>手机 APP</span>
                            <label class="show-app-ewm fn-hover-menu">
                                <img src="img/icon-ewm.png">
                                <span>扫一扫 ，下载APP</span>
                            </label>
                        </a>
                        <a class="app-qq-bar" href="javascript:;"><i class="fb-sprite icon-QQ"></i></a>
                        <a class="wx-ewm-bar fn-hover-bar" href="javascript:;">
                            <i class="fb-sprite icon-WX"></i>
                            <label class="show-wx-ewm fn-hover-menu">
                                <img src="img/icon-ewm.png">
                                <span>扫一扫，关注公众号</span>
                            </label>
                        </a>
                    </label>
                </div>
            </div>
        </div>
        <div class="in-head-bar">
            <div class="fb-wrap-1200 fs-16 pt-5 pb-10">
                <div class="fb-container clear">
                    <div class="in-head-login">
                        <a href="ggc-index.html">
                            <label class="logo"><img src="img/logo.png"></label>
                            <label class="logo-text">
                                <img src="img/logo-text.png">
                                <span class="fs-12 tc-333"><em class="tc-oag">785213</em>位投资人的选择</span>
                            </label>
                        </a>
                    </div>
                    <div class="in-head-nav">
                        <a class="active" href="ggc-index.html">
                            <em></em>
                            <span>首页</span>
                        </a>
                        <a href="ggc-cars-funding.html">
                            <em></em>
                            <span>汽车众筹</span>
                        </a>
                        <a href="ggc-safety-guarantee.html">
                            <em></em>
                            <span>安全保障</span>
                            <i class="fb-sprite icon-new"></i>
                        </a>
                        <a href="user-new-people.html">
                            <em></em>
                            <span>新手指引</span>
                        </a>
                        <a href="user-about-us.html">
                            <em></em>
                            <span>关于我们</span>
                        </a>
                        <a href="user-personal-center.html">
                            <em></em>
                            <span>我的账户</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--内容-->
    <div class="in-container">
        <div class="lottery-box">
            <div class="fb-wrap-1200">
                <div class="logo"><label><img src="img/lottery/lottery-logo.png"></label></div>
                <div class="container">
                    <div class="p-rel">
                        <div class="lottery">
                            <div class="bg">
                                <div class="fb-box-list" id="lottery">
                                    <ul class="row-3">
                                        <li>
                                            <div class="award-box award-box-0">
                                                <label><img src="img/lottery/award1.png"></label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="award-box award-box-1">
                                                <label><img src="img/lottery/award5.png"></label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="award-box award-box-2">
                                                <label><img src="img/lottery/award3.png"></label>
                                            </div>
                                        </li>
                                    </ul>
                                    <ul class="row-3">
                                        <li>
                                            <div class="award-box award-box-7">
                                                <label><img src="img/lottery/award4.png"></label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="award-box background">
                                                <a id="lotteryBtn" href="javascript:;"><img
                                                        src="img/lottery/lottery-btn.png"></a>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="award-box award-box-3">
                                                <label><img src="img/lottery/award2.png"></label>
                                            </div>
                                        </li>
                                    </ul>
                                    <ul class="row-3">
                                        <li>
                                            <div class="award-box award-box-6">
                                                <label><img src="img/lottery/award3.png"></label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="award-box award-box-5">
                                                <label><img src="img/lottery/award6.png"></label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="award-box award-box-4">
                                                <label><img src="img/lottery/award7.png"></label>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="shadow">
                            <label><img src="img/lottery/lottery-shadow.png"></label>
                        </div>
                        <div class="gold">
                            <label class="left"><img src="img/lottery/lottery-matter2.png"></label>
                            <label class="integral">可用积分：<em>5000</em></label>
                            <label class="right"><img src="img/lottery/lottery-matter3.png"></label>
                        </div>
                    </div>
                    <div class="intro">
                        <p>抽奖说明：</p>
                        <label>
                            <span>1、每10积分可以进行一次抽奖；</span>
                            <span>2、最终解释权归本公司所有；</span>
                        </label>
                    </div>
                    <div class="list">
                        <label class="title"><img src="img/lottery/lottery-list-line.png"></label>
                        <div class="cont">
                            <label><span>中奖名单</span></label>
                            <div class="cont-height">
                                <ul id="winListContainer">
                                    <li class="background">
                                        <span class="user">135****5548</span>
                                        <span>获得</span>
                                        <span class="ticket">1.5%增益券</span>
                                        <span class="time">2017-11-12 08:00</span>
                                    </li>
                                    <li>
                                        <span class="user">135****5548</span>
                                        <span>获得</span>
                                        <span class="ticket">1.5%增益券</span>
                                        <span class="time">2017-11-12 08:00</span>
                                    </li>
                                    <li class="background">
                                        <span class="user">135****5548</span>
                                        <span>获得</span>
                                        <span class="ticket">1.5%增益券</span>
                                        <span class="time">2017-11-12 08:00</span>
                                    </li>
                                    <li>
                                        <span class="user">135****5548</span>
                                        <span>获得</span>
                                        <span class="ticket">1.5%增益券</span>
                                        <span class="time">2017-11-12 08:00</span>
                                    </li>
                                    <li class="background">
                                        <span class="user">135****5548</span>
                                        <span>获得</span>
                                        <span class="ticket">1.5%增益券</span>
                                        <span class="time">2017-11-12 08:00</span>
                                    </li>
                                    <li>
                                        <span class="user">135****5548</span>
                                        <span>获得</span>
                                        <span class="ticket">1.5%增益券</span>
                                        <span class="time">2017-11-12 08:00</span>
                                    </li>
                                    <li class="background">
                                        <span class="user">135****5548</span>
                                        <span>获得</span>
                                        <span class="ticket">1.5%增益券</span>
                                        <span class="time">2017-11-12 08:00</span>
                                    </li>
                                    <li>
                                        <span class="user">135****5548</span>
                                        <span>获得</span>
                                        <span class="ticket">1.5%增益券</span>
                                        <span class="time">2017-11-12 08:00</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="bg"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--底部-->
    <div class="in-footer-bar mt-0">
        <div class="fb-wrap-1200">
            <div class="footer-cont">
                <div class="footer-intro clear">
                    <div class="about-us">
                        <h2>关于我们</h2>
                        <ul>
                            <li>
                                <label>客服热线: <span>023-6281-7690</span></label>
                            </li>
                            <li>
                                <label>公司地址：重庆市南岸区烟雨路1号（大都水汇旁）</label>
                            </li>
                            <li>
                                <label>工作时间：周一到周五 09:00-18:00</label>
                            </li>
                            <li>
                                <label>服务邮箱：hzccan@qq.com</label>
                            </li>
                        </ul>
                    </div>
                    <div class="keep-us">
                        <h2>关注下载</h2>
                        <label>
                            <img src="img/icon-ewm.png">
                            <span>扫一扫关注微信公众号</span>
                        </label>
                        <label>
                            <img src="img/icon-ewm.png">
                            <span>扫一扫下载APP</span>
                        </label>
                    </div>
                    <div class="exterior-links">
                        <h2>友情链接</h2>
                        <label>
                            <a href="#">黑客帝国</a>
                            <a href="#">长江证券</a>
                            <a href="#">平安保险</a>
                            <a href="#">站长统计</a>
                        </label>
                    </div>
                </div>
            </div>
            <span class="copyright">2010-2017 版权所有 © 滚滚筹 粤ICP备16104116号-1</span>
        </div>
    </div>
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.jbox.js"></script>
<script src="js/fb-common.js"></script>
<script src="js/fb-page.js"></script>
<script>
    $(function () {
        //滚动
        var _clearTimer_ = 0;
        var marqueeText = function (tag, slideDir, time) {
            clearInterval(_clearTimer_);
            _clearTimer_ = setInterval(function () {
                var _top = parseInt($(tag).css("marginTop"));
                var _moveHeight = $(tag).find("li:eq(0)").height();
                switch (slideDir) {
                    case "top":
                        $(tag).animate({
                            "marginTop": _top - _moveHeight + "px"
                        }, 300, function () {
                            $(tag).css({"marginTop": 0}).children("li").last().after($(tag).children("li").first());
                        });
                        break;
                }
            }, time);
        };

        //中奖信息滚动
        marqueeText("#winListContainer", "top", 2000);

        //奖品信息
        var award = [
            {text: "10积分", num: 10, index: 1},
            {text: "1.25%增益券", num: 125 / 100, index: 2},
            {text: "100积分", num: 100, index: 3},
            {text: "50积分", num: 50, index: 4},
            {text: "再接再厉", num: 0, index: 5},
            {text: "2.25%增益券", num: 225 / 100, index: 6},
            {text: "100积分", num: 100, index: 7},
            {text: "500积分", num: 500, index: 8}
        ];

        //抽奖代码
        var lottery = {
            index: -1,    //当前转动到哪个位置，起点位置
            count: 0,     //总共有多少个位置
            timer: 0,     //setTimeout的ID，用clearTimeout清除
            speed: 20,    //初始转动速度
            times: 0,     //转动次数
            cycle: 50,    //转动基本次数：即至少需要转动多少次再进入抽奖环节
            prize: -1,    //中奖位置
            init: function (id) {
                if ($(id).find('.award-box').length > 0) {
                    var $lottery = $(id);
                    var $units = $lottery.find('.award-box').not(".background");
                    this.obj = $lottery;
                    this.count = $units.length;
                    $lottery.find('.award-box.award-box-' + this.index).addClass('active');
                }
            },
            roll: function () {
                var index = this.index;
                var count = this.count;
                var lottery = this.obj;
                $(lottery).find('.award-box.award-box-' + index).removeClass('active');
                index += 1;
                if (index > count - 1) {
                    index = 0;
                }
                $(lottery).find('.award-box.award-box-' + index).addClass('active');
                this.index = index;
                return false;
            },
            stop: function (index) {
                this.prize = index;
                return false;
            }
        };

        function roll() {
            lottery.times += 1;
            lottery.roll(); //转动过程调用的是lottery的roll方法，这里是第一次调用初始化

            if (lottery.times > lottery.cycle + 10 && lottery.prize == lottery.index) {
                clearTimeout(lottery.timer);
                var lottery_num = lottery.prize;
                var lottery_text = award[lottery.prize].text;
                var html = "";
                if (lottery_num == 4) {
                    html = lotteryHtml(false, null);
                } else {
                    html = lotteryHtml(true, lottery_text);
                }
                setTimeout(function () {
                    $(document.body).append(html);

                    $("#lotteryClose").click(function () {
                        $(".disk-lottery").fadeOut(300, function () {
                            $(this).remove();
                        });
                    });
                }, 1000);
                lottery.prize = -1;
                lottery.times = 0;
                click = false;
            } else {
                if (lottery.times < lottery.cycle) {
                    lottery.speed -= 10;
                } else if (lottery.times == lottery.cycle) {
                    lottery.prize = Math.random() * (lottery.count) | 0; //静态演示，随机产生一个奖品序号，实际需请求接口产生
                } else {
                    if (lottery.times > lottery.cycle + 10 && ((lottery.prize == 0 && lottery.index == 7) || lottery.prize == lottery.index + 1)) {
                        lottery.speed += 110;
                    } else {
                        lottery.speed += 20;
                    }
                }
                if (lottery.speed < 40) {
                    lottery.speed = 40;
                }
                lottery.timer = setTimeout(roll, lottery.speed); //循环调用
            }
            return false;
        }


        function lotteryHtml(type, lotteryText) {
            var img = type ? "img/lottery/pop-lottery-s.png" : "img/lottery/pop-lottery-e.png";
            var text = type ? "恭喜你！" : "很遗憾";
            var lottery_text = type ? "获得<em>" + lotteryText + "</em>,奖励已放入<br>您的账户中。" : "你没有获得任何奖励！";
            var btnText = type ? "立即领取" : "继续抽奖";
            var btnID = type ? "successBtn" : "errorBtn";
            return '\
                <div class="disk-lottery">\
                    <div class="pop-lottery">\
                        <div class="cont">\
                            <div class="close"><a id="lotteryClose" href="javascript:;">&times;</a></div>\
                            <div class="title"><label><img src=' + img + '></label></div>\
                            <div class="text">\
                                <label>' + text + '</label>\
                                <span>' + lottery_text + '</span>\
                            </div>\
                            <a class="btn" href="javascript:;" id=' + btnID + '>' + btnText + '</a>\
                        </div>\
                    </div>\
                </div>\
            ';
        }

        lottery.init('#lottery');
        var click = false;

        $("#lotteryBtn").click(function () {
            if (click) { //click控制一次抽奖过程中不能重复点击抽奖按钮，后面的点击不响应
                return false;
            } else {
                lottery.speed = 100;
                roll(); //转圈过程不响应click事件，会将click置为false
                click = true; //一次抽奖完成后，设置click为true，可继续抽奖
                return false;
            }
        });
    })
</script>
</body>
</html>